import '@progress/kendo-ui/src/kendo.menu.js';

function getRootItem(index) {
    return $('#menu').find('> .k-item > .k-link')[index];
}

let open;
let close;
let menu;

describe("menu open on click", function() {
    beforeEach(function() {
        Mocha.fixture.append(
            '<ul id="menu" class="k-reset k-header k-menu" style="visibility: hidden;">' +
            '    <li class="k-item" style=""><span class="k-link">ASP.NET MVC<span' +
            '            class="k-icon k-i-caret-alt-down"></span></span>' +
            '        <ul class="k-menu-group">' +
            '            <li class="k-item"><span class="k-link">Grid</span>' +
            '            </li>' +
            '            <li class="k-item"><span class="k-link">Menu<span' +
            '            class="k-icon k-i-caret-alt-right"></span></span>' +
            '                <ul class="k-menu-group">' +
            '                    <li class="k-item"><span class="k-link">Grid</span>' +
            '                    </li>' +
            '                    <li class="k-item"><span class="k-link">Menu</span>' +
            '                    </li>' +
            '                    <li class="k-item"><span class="k-link">PanelBar</span></li>' +
            '                    <li class="k-item"><span class="k-link">TabStrip</span></li>' +
            '                </ul>' +
            '            </li>' +
            '            <li class="k-item"><span class="k-link">PanelBar</span></li>' +
            '            <li class="k-item"><span class="k-link">TabStrip</span></li>' +
            '        </ul>' +
            '    </li><li class="k-item"><span class="k-link">Silverlight<span' +
            '            class="k-icon k-i-caret-alt-down"></span></span>' +
            '        <ul class="k-menu-group">' +
            '            <li class="k-item"><span class="k-link">GridView</span>' +
            '            </li>' +
            '            <li class="k-item"><span class="k-link">Scheduler</span></li>' +
            '            <li class="k-item"><span class="k-link">Docking</span>' +
            '            </li>' +
            '            <li class="k-item"><span class="k-link">Chart</span></li>' +
            '            <li class="k-item"><a href="http://www.telerik.com/products/silverlight.aspx"' +
            '                                                  class="k-link">... and 28 more!</a></li>' +
            '        </ul>' +
            '    </li><li class="k-item"><span class="k-link">ASP.NET AJAX<span' +
            '            class="k-icon k-i-caret-alt-down"></span></span>' +
            '        <ul class="k-menu-group">' +
            '            <li class="k-item"><span class="k-link">Grid</span></li>' +
            '            <li class="k-item"><span class="k-link">Editor</span>' +
            '            </li>' +
            '            <li class="k-item"><span class="k-link">Scheduler</span></li>' +
            '            <li class="k-item"><a href="http://www.telerik.com/products/aspnet-ajax.aspx"' +
            '                                                  class="k-link">... and 28 more!</a></li>' +
            '        </ul>' +
            '    </li><li class="k-item">OpenAccess ORM<span' +
            '            class="k-icon k-i-caret-alt-down"></span>' +
            '        <ul class="k-menu-group">' +
            '            <li class="k-item">' +
            '                <div id="Menu-4" class="k-content">' +
            '                    <a href="http://www.telerik.com/purchase/individual/orm.aspx" id="buy">' +
            '                        Telerik OpenAccess ORM' +
            '                    </a>' +
            '                    <a href="http://www.telerik.com/community/license-agreement.aspx?pId=639" id="express">' +
            '                        Telerik OpenAccess ORM Express' +
            '                    </a>' +
            '                </div>' +
            '            </li>' +
            '        </ul>' +
            '    </li><li class="k-item"><span class="k-link">Reporting</span></li><li class="k-item"><span class="k-link">Sitefinity ASP.NET CMS</span>' +
            '    </li><li style="border-right: 0;" class="k-item"><span class="k-link">Other products<span' +
            '            class="k-icon k-i-caret-alt-down"></span></span>' +
            '        <ul class="k-menu-group">' +
            '            <li class="k-item"><span class="k-link">Web Testing Tools</span>' +
            '            </li>' +
            '            <li class="k-item"><span class="k-link">WinForms UI Controls</span>' +
            '            </li>' +
            '            <li class="k-item"><span class="k-link">PF UI Controls</span></li>' +
            '        </ul>' +
            '    </li>' +
            '    <li><a href="javascript:">ASP.NET MVC</a></li>' +
            '</ul>'
        );

    });
    afterEach(function() {
        kendo.destroy(Mocha.fixture);
    });

    function initializeMenu() {
        menu = new kendo.ui.Menu("#menu", { animation: false, openOnClick: true, hoverDelay: 0 });
        open = menu.open;
        close = menu.close;
    }

    it('open on click is serialized', function() {
        initializeMenu();
        assert.isOk(menu.options.openOnClick);
    });

    it('click method should call preventDefault method', function() {
        initializeMenu();
        let item = getRootItem(3);
        let isCalled = false;

        let e = { target: item, preventDefault: function() { isCalled = true; }, stopPropagation: function() { } };

        menu._click(e);

        assert.isOk(isCalled);
    });

    it('click method on item with URL shouldn\'t call preventDefault method', function() {
        initializeMenu();
        let item = getRootItem(7);
        let isCalled = false;

        let e = { target: item, preventDefault: function() { isCalled = true; }, stopPropagation: function() { } };

        menu._click(e);

        assert.isOk(!isCalled);
    });

    it('clicking on item content should do nothing', function() {
        initializeMenu();
        let element = $("#Menu-4");
        let isCalled = false;
        let failHandler = function() {
            assert.isOk(false);
        };

        let e = { target: element, preventDefault: function() { isCalled = true; }, stopPropagation: function() { } };

        menu.bind("select", failHandler);
        menu.bind("open", failHandler);
        menu.bind("close", failHandler);
        menu._click(e);

        assert.isOk(!isCalled);
    });

    it('hovering root item does not open it', function() {
        initializeMenu();
        let opened = false,
            item = $("li:first", menu.element)[0],
            menuElement = menu.wrapper[0],
            e = { target: item, currentTarget: item, delegateTarget: menuElement, relatedTarget: menuElement, preventDefault: $.noop, stopPropagation: $.noop };

        menu.open = function() { opened = true; };

        menu._mouseenter(e, item);

        assert.isOk(!opened);
    });

    it('hovering root item does not open it after using close method', function() {
        initializeMenu();
        let opened,
            item = $("li:first", menu.element)[0],
            menuElement = menu.wrapper[0],
            e = { target: item, currentTarget: item, delegateTarget: menuElement, relatedTarget: menuElement, preventDefault: $.noop, stopPropagation: $.noop };

        menu.open = function() { opened = true; };

        menu._click(e, item);
        opened = false;
        menu.close(item);
        menu._mouseenter(e, item);

        assert.isOk(!opened);
        assert.equal(menu.clicked, false);
    });

    it('clicking root item should open it', function() {
        initializeMenu();
        let opened = false;
        menu.open = function() { opened = true; };
        let element = $("li:first", menu.element)[0];
        menu._click({ target: element, preventDefault: function() { }, stopPropagation: function() { } }, element);
        assert.isOk(opened);
        assert.isOk(menu.clicked);
    });

    it('leaving opened item does not close it', function() {
        initializeMenu();
        let opened = false;
        menu.clicked = true;
        menu.open = function() { opened = true; };

        menu._mouseleave({}, $("li:first", menu.element)[0]);

        assert.isOk(!opened);
    });

    it('leaving opened and hovering a sibling closes it and does not open the sibling', function() {
        initializeMenu();
        let opened = false;
        menu.clicked = true;
        menu.open = function() { opened = true; };

        let element = $("li:first", menu.element)[0];
        menu._mouseenter({ currentTarget: element, delegateTarget: menu.element[0], indexOf: function() { }, type: 'mouseenter' }, element.nextSibling);

        assert.isOk(opened);
    });

    it('clicking the document closes the open item', function() {
        initializeMenu();
        menu.clicked = true;

        menu._documentClick({ target: document.body }, document);
        assert.isOk(menu.clicked === false);
    });

    it('rootMenuItems: sibling root item is not opened on mouseenter', function() {
        menu = new kendo.ui.Menu("#menu", { animation: false, openOnClick: { rootMenuItems: true }, hoverDelay: 0 });
        let opened = false;

        let element = $("li:first", menu.element)[0];
        menu._click({ target: element, preventDefault: function() { }, stopPropagation: function() { } }, element);
        menu.open = function() { opened = true; };
        menu._mouseenter({ currentTarget: element, delegateTarget: menu.element[0], indexOf: function() { }, type: 'mouseenter' }, element.nextSibling);
        assert.isOk(!opened);
    });

    it('rootMenuItems: sibling root item is opened on click', function() {
        menu = new kendo.ui.Menu("#menu", { animation: false, openOnClick: { rootMenuItems: true }, hoverDelay: 0 });
        let opened = false;

        let element = $("li:first", menu.element)[0];
        menu._click({ target: element, preventDefault: function() { }, stopPropagation: function() { } }, element);
        menu.open = function() { opened = true; };
        menu._click({ target: element.nextSibling, preventDefault: function() { }, stopPropagation: function() { } }, element.nextSibling);
        assert.isOk(opened);
    });
});
